<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>mustache库基本使用</title>
    
</head>
<body>
    <script src="jslib/mustache.js"></script>
    <div id="container"></div>
    <div id="container1"></div>
    <div id="container2"></div>
    <div id="container3"></div>
    <script type="text/template" id="mytemplate">
        <ul>
            {{#arr}}
                <li>
                    <div class="hd">{{name}}的基本信息</div>
                    <div class="bd">
                        <p>姓名：{{name}}</p>
                        <p>姓别：{{sex}}</p>
                        <p>年龄：{{age}}</p>
                    </div>
                    {{name}}的业余爱好是:
                    <ol>
                        {{#hobbies}}
                            {{.}}
                        {{/hobbies}}
                    </ol>
                </li>
            {{/arr}}
        <ul>
    </script>
    <script>
        // 使用循环、嵌套循环
        var templateStr = `
            <ul>
                {{#arr}}
                    <li>
                        <div class="hd">{{name}}的基本信息</div>
                        <div class="bd">
                            <p>姓名：{{name}}</p>
                            <p>姓别：{{sex}}</p>
                            <p>年龄：{{age}}</p>
                        </div>
                        {{name}}的业余爱好是:
                        <ol>
                            {{#hobbies}}
                                {{.}}
                            {{/hobbies}}
                        </ol>
                    </li>
                {{/arr}}
            <ul>
        `
        var domStr = Mustache.render(templateStr, {
            arr: [
                {"name": "小明", "age": 12, "sex": "男", "hobbies": ["游泳"]},
                {"name": "小红", "age": 11, "sex": "女", "hobbies": ["唱歌", "跳舞"]},
                {"name": "小强", "age": 13, "sex": "男", "hobbies": ["看书", "学习"]},
            ]
        })
        var container = document.getElementById('container')
        container.innerHTML = domStr

        // 使用对象
        var templateStr1 = `
            <p>我买了一个{{thing}}，好{{mood}}</p>
        `
        var domStr1 = Mustache.render(templateStr1, {
            "thing": "华为手机",
            "mood": "开心"
        })
        var container1 = document.getElementById('container1')
        console.log(container1)
        container1.innerHTML = domStr1

        // 使用boolean
        var templateStr2 = `
            {{#m}}
                <p>我会被隐藏</p>        
            {{/m}}
        `
        var domStr2 = Mustache.render(templateStr2, {
            m: false
        })
        var container2 = document.getElementById('container2')
        console.log(container2)
        container2.innerHTML = domStr2

        // 使用template模板，解决反引号问题
        var mytemplateStr = document.getElementById('mytemplate').innerHTML
        var domStr3 = Mustache.render(mytemplateStr, {
            arr: [
                {"name": "小明", "age": 12, "sex": "男", "hobbies": ["游泳"]},
                {"name": "小红", "age": 11, "sex": "女", "hobbies": ["唱歌", "跳舞"]},
                {"name": "小强", "age": 13, "sex": "男", "hobbies": ["看书", "学习"]},
            ]
        })
        var container3 = document.getElementById('container3')
        container3.innerHTML = domStr3
    </script>
</body>
</html>